<template>
  <div class="emailPass">
    <el-input v-model.trim="emailPass" placeholder="请输入邮箱授权码">
      <template #prepend>邮箱授权码</template>
    </el-input>
    <SendBtn class="sendbtn" @click="emailPassUpate">修改</SendBtn>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent, watch } from 'vue'

import { updateEmailPass } from '@/utils/userManageHttp'
import { ElMessage } from 'element-plus'

const SendBtn = defineAsyncComponent(
  () => import('@/components/button/SendBtn.vue')
)

const emailPass = ref<string>('JHPPJONKJCJPUDCK')

const props = defineProps<{
  emailpassServe: string
}>()

watch(
  () => props.emailpassServe,
  (value) => {
    emailPass.value = value
  },
  {
    immediate: true,
  }
)
// 更新邮箱验证码
const emailPassUpate = () => {
  if (!emailPass.value) return ElMessage.error('不能为空')

  updateEmailPass(emailPass.value).then((res) => {
    res.data.ok
      ? ElMessage.success(res.data.info)
      : ElMessage.error(res.data.info)
  })
}
</script>

<style lang="scss" scoped>
.emailPass {
  display: flex;
  margin-top: 20px;
  :deep(.sendbtn) {
    width: 80px;
    height: 35px;
  }
}
</style>
